<template>
  <div class="container">
    <a-form label-width="120px">
      <a-row gutter="20">
        <a-col span="6">
          <a-form-item label="建议分类">
            <a-select v-model="state.sd.typeId" placeholder="请选择分类..." allow-clear>
              <a-option :value="t.id" v-for="t in state.typeList" :key="t.id">{{t.title}}</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col span="6">
          <a-form-item label="查询日期起">
            <a-date-picker v-model="state.sd.startDate" style="width: 100%;" value-format="YYYY-MM-DD"  />
          </a-form-item>
        </a-col>
        <a-col span="6">
          <a-form-item label="查询日期止">
            <a-date-picker v-model="state.sd.endDate" style="width: 100%;" value-format="YYYY-MM-DD"  />
          </a-form-item>
        </a-col>

        <a-col :span="6">
          <a-button type="primary" @click="searchYiJian">
            <template #icon><icon-search /></template>查询
          </a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-table :bordered="{cell:true}" :pagination="false" stripe :data="state.yijianObj.list">
      <template #columns>
        <a-table-column title="建议分类" data-index="yijiantypestr"></a-table-column>
        <a-table-column title="提交时间">
          <template #cell="{ record }"><DateFormat :value="record.createtime" :format="'YYYY-MM-DD HH:mm'"></DateFormat></template>
        </a-table-column>
        <a-table-column title="操作" width="350">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary" size="small" @click="viewYiJian(record.id)"><template #icon><icon-eye /></template>查看</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <a-pagination class="mt10" show-total :total="state.yijianObj.total" @change="loadYiJian" @page-size-change="loadYiJian" v-model:current="state.sd.pageNum" v-model:page-size="state.sd.pageSize"></a-pagination>

    <a-modal title="建议详情" v-model:visible="state.viewDetailVisible" :align-center="false" :mask-closable="false" :footer="false" width="1688px">
      <ViewYijian v-if="state.viewDetailVisible" v-model="state.viewDetailVisible" :entityId="state.popupEntityId"></ViewYijian>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import mittBus from "@/utils/route-listener"
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent} from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const ViewYijian = defineAsyncComponent(() => import('@/views/basedata/viewyijian.vue'));

const state = reactive({
  sd: {
    typeId:undefined,
    startDate:undefined,
    endDate:undefined,
    pageNum: 1,
    pageSize: 15
  },
  typeList:[],
  yijianObj: {},
  viewDetailVisible : false,
  popupEntityId : 0,
})
const loadTypeList = ()=>{
  axios.post('/yijian/pageyijiantype',{}).then( (res) =>{
    const {code,msg, data} = res;
    if(code == '200'){
      state.typeList = data
    }
  })
}
const searchYiJian = ()=>{
  state.sd.pageNum = 1;
  loadYiJian();
}
const loadYiJian = ()=>{
  axios.post('/yijian/pageyijianbox', state.sd).then(res => {
    const { data } = res
    state.yijianObj = data
  })
}
const viewYiJian = (id)=>{
  state.popupEntityId = id;
  state.viewDetailVisible = true
}
onMounted(()=>{
  loadTypeList();
  loadYiJian();
})

</script>

<style scoped>

</style>
